<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生年龄分布图</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    fetch('/student/ageDistribution')
       .then(response => response.json())
       .then(data => {
            var ages = data.ages;
            var counts = data.counts;
            var option = {
                title: {
                    text: '学生年龄分布图'
                },
                tooltip: {},
                xAxis: {
                    data: ages
                },
                yAxis: {},
                series: [{
                    name: '学生数量',
                    type: 'bar',
                    data: counts
                }]
            };
            myChart.setOption(option);
            });
</script>
</body>
</html>